<html>
    <head>
        <meta charset="utf-8" />
        <title>训练倒计时</title>
        <script>
            let tid = 0
            let curSelectSec = 60
            let total = curSelectSec
            let isCanChange = true
            function startCd() {
                isCanChange = false
                setCdText(total.toString())
                tid = setInterval(function (){
                    total--
                    setCdText(total.toString())
                    if (total<=0) {
                        stopTime()
                        setCdText("已结束")
                        isCanChange = true
                    }
                },1000)
            }
            
            function stopCd() {
                stopTime()
                total = curSelectSec
                setCdText("已结束")
                isCanChange = true
            }

            function stopTime(){
                clearInterval(tid)
                tid = 0
            }

            function pauseCd(){
                if(total<=0 || tid==0)
                {
                    return
                }
                clearInterval(tid)
                setCdText("暂停中")
                isCanChange = false
            }

            function setCdText(text){
                document.getElementById("cdText").innerHTML = text
            }

            function onSelectChange(selectValue){
                if (!isCanChange) {
                    alert("请先停止再修改时间!")
                    return
                }
                curSelectSec = parseInt(selectValue)
                total = curSelectSec
            }

        </script>
        <style>
            body{
                padding: 0 1.25em 0.25em;
                
            }
            #bottom{
                
                margin: auto;
                margin-top: 10px;
                width: 300px;
                height: 50px;
                text-align: center;
            }
            #content{
                background-color: #999999;
                width: 300px;
                height: 300px;
                text-align: center;
                border-radius: 20px;
                margin: auto;

            }
            #cdText{
                color: #00ff00;
                font-size: 100;
            }
            #cdContent{
                padding-top: 70px;
            }

        </style>
    </head>
    <body>
        <div id = "bottom">
            <span>请选择：</span>
            <select onchange="onSelectChange(this.options[this.selectedIndex].value)">
                <option value ="30" >30秒</option>
                <option value ="60" selected="true" >一分钟</option>
                <option value ="120">两分钟</option>
                <option value="180">三分钟</option>
                <option value="300">五分钟</option>
              </select>
        </div>
        <div id="content">
            <div id="cdContent">
                <span id="cdText">等待中</span>
            </div>
            
        </div>
        <div id="bottom">
            <button onclick="startCd()" >开始</button>
            <button onclick="pauseCd()" >暂停</button>
            <button onclick="stopCd()" >停止</button>
        </div>
        
    </body>
</html>
